import { formItem, required, rules, useForm, valueName } from '@/hooks/useForm';
import { Checkbox, Input, Space } from 'antd';
import { FC, useEffect } from 'react';
import FormItem from '../FormItem';

class Config {
  @formItem(<Checkbox />)
  @valueName('checked')
  checked?: boolean;

  @formItem(<Input />)
  @rules(required('请输入标题内容'))
  text?: string;

  @formItem(<span />)
  value?: string;
}

interface ItemFormProps {
  value?: any;
  onChange?: Function;
  father?: any;
}

const ItemForm: FC<ItemFormProps> = (props) => {
  const { value, onChange, father } = props;

  const form = useForm({
    config: Config,
    onChange,
    father,
  });

  useEffect(() => {
    form.setFormData(value);
  }, [value]);

  const { formItem: checkBox } = form.items?.[0] || {};
  const { formItem: input, error } = form.items?.[1] || {};

  return (
    <Space>
      {checkBox}
      <FormItem error={error}>{input}</FormItem>
    </Space>
  );
};

export default ItemForm;
